<template>
<div class="detail-main">
  <div class="detail">
    <van-nav-bar title="耀莱成龙影城（建业店）"
                 @click-left="onClickLeft"
                 @click-right="onClickRight"
                 :border='false'>
      <template #left>
        <van-icon name="arrow-left"
                  size="18" />
      </template>
      <template #right>
        <van-icon name="star-o"
                  size="18" />
      </template>
    </van-nav-bar>
    <van-cell title="耀莱成龙影城（建业店）"
              is-link
              to="address"
              label="金水区中州大道建业置地"
              icon="location-o" />

    <div class="allMovie">
      <div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <div class="swiper-slide"
               :key="banner"
               v-for="banner in banners">
            <img :src="banner">
          </div>
        </div>
      </div>
      <div class="movie-title">
        <h2>后来的我们</h2>
        <p>119分钟 | 剧情 | 周冬雨</p>
      </div>
    </div>
    <!-- 今日电影 -->
    <div class="movie-list">
      <div class="movie-list-title">
        今天2月1号
      </div>
      <div class="movie-item" v-for="item in 5" :key="item">
        <div class="time">
          <h2>15:30</h2>
          <p>17:14散场</p>
        </div>
        <div class="movie-hall">
          <p>原版3D</p>
          <p>2号厅（招商冠名中）</p>
        </div>
        <div class="price">
          30.9元
        </div>
          <router-link to="pickseat" tag="div" class="ticket">
            购票
          </router-link>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import ban1 from '@/assets/images/cinema/banner01.png'
import ban2 from '@/assets/images/cinema/banner02.png'
import ban3 from '@/assets/images/cinema/banner03.png'
import ban4 from '@/assets/images/cinema/banner04.png'
import ban5 from '@/assets/images/cinema/banner05.png'
export default {
	name: 'detail',
	data() {
		return {
			banners: [ban1, ban2, ban3, ban4],
			swiperOption: {
				slidesPerView: 3,
				// spaceBetween: 5,
				centeredSlides: true,
				// loop: true
			}
		}
	},
	mounted() {
		console.log('Current Swiper instance object', this.mySwiper)
		this.mySwiper.slideTo(1, 1000, false)
	},
	methods: {
		onClickLeft() {
			this.$router.back()
		},
		onClickRight() {
			Toast('按钮')
		}
	}
}
</script>

<style lang='scss' scoped>
.detail-main{
  height: 100vh;
  overflow: scroll;
}
div.detail {
	height:600px;
	border-bottom-right-radius: 300px 60px;
	border-bottom-left-radius: 300px 60px;
	background-image: linear-gradient(129deg, #f25e84 6%, #f1a562 100%);
	.van-nav-bar {
		height: 90px;
		margin: 0 auto;
    // position: 
		background-color: inherit;
		/deep/ .van-nav-bar__right {
			margin-right: 20px;
		}
		/deep/ .van-nav-bar__left {
			margin-left: 20px;
		}
		/deep/ .van-nav-bar__title {
			font-size: 32px;
			color: #ffffff;
		}
	}
	.van-cell--clickable {
		// height: 88px;
		padding-left: 44px;
		margin-top: 39px;
		background-color: initial;
		.van-cell__left-icon::before {
			font-size: 42px;
		}
		div {
			margin-left: 51.4px;
			span {
				font-size: 32px;
				color: #ffffff;
			}
			div {
				font-size: 24px;
				opacity: 0.51;
				color: #ffffff;
			}
		}
		.van-cell__right-icon::before {
			font-size: 35px;
		}
	}
	.allMovie {
		margin-top: 100px;
		.swiper-container {
			.swiper-wrapper {
				.swiper-slide {
					height: 340px;
					width: 100px;
					img {
						height: 336px;
						width: 230px;
					}
				}
			}
			.swiper-slide .swiper-slide-active {
				img {
					height: 376px;
					width: 280px;
				}
			}
		}
		.movie-title {
			height: 100px;
			text-align: center;
			h2 {
				font-size: 36px;
				color: #ffffff;
			}
			p {
				margin-top: 6px;
				opacity: 0.6;
				font-size: 28px;
				color: #ffffff;
			}
		}
	}
	.movie-list {
		width: 670px;
		margin: 0 auto;
		.movie-list-title {
			font-size: 24px;
			color: #fbc34a;
		}
		.movie-item {
			width: 670px;
			height: 182px;
			margin-top: 22px;
			background-color: #33363d;
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #ffffff;
			.time {
				h2 {
					font-size: 36px;
					color: #ffffff;
				}
				p {
					opacity: 0.6;
					font-size: 24px;
					color: #ffffff;
				}
			}
			.movie-hall {
				width: 135px;
				font-size: 24px;
				color: #ffffff;
				p {
					&:nth-child(2) {
						opacity: 0.6;
					}
				}
			}
			.price {
				font-size: 36px;
				color: #fbc34a;
			}
			.ticket {
				height: 50px;
				width: 90px;
				text-align: center;
				line-height: 50px;
				background-image: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
				box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
				border-radius: 12px;
				border-radius: 12px;
			}
		}
	}
}
</style>
